<template>
	<view class="box" :style="'height: ' + windowHeight + 'px;width:' + windowWidth + 'px'">
		<image
			@click="pre(item, index)"
			v-for="(item, index) in list"
			:key="index"
			:style="'width:' + item.width + 'rpx ;height:' + item.height + 'rpx ;'"
			:src="item.src"
		></image>
	</view>
</template>

<script>
export default {
	data() {
		return {
			windowHeight: '',
			windowWidth: '',
			list: [
				{
					width: 633,
					height: 805,
					src: 'http://oss.91xiaokong.com/fireControl/jingyanjiaoliu/1.png'
				},
				{
					width: 631,
					height: 788,
					src: 'http://oss.91xiaokong.com/fireControl/jingyanjiaoliu/2.png'
				},
				{
					width: 631,
					height: 796,
					src: 'http://oss.91xiaokong.com/fireControl/jingyanjiaoliu/3.png'
				},
				{
					width: 631,
					height: 772,
					src: 'http://oss.91xiaokong.com/fireControl/jingyanjiaoliu/4.png'
				},
				{
					width: 631,
					height: 782,
					src: 'http://oss.91xiaokong.com/fireControl/jingyanjiaoliu/5.png'
				}
			],
			urls: [
				'http://oss.91xiaokong.com/fireControl/jingyanjiaoliu/1.png',
				'http://oss.91xiaokong.com/fireControl/jingyanjiaoliu/2.png',
				'http://oss.91xiaokong.com/fireControl/jingyanjiaoliu/3.png',
				'http://oss.91xiaokong.com/fireControl/jingyanjiaoliu/4.png',
				'http://oss.91xiaokong.com/fireControl/jingyanjiaoliu/5.png'
			]
		};
	},
	onShow() {
		uni.showLoading({})
		setTimeout(function() {
			uni.hideLoading()
		}, 500)
		
	},
	onLoad() {
		this.getSystemInfo();
	},
	methods: {
		pre(item, index) {
			let that = this;
			uni.previewImage({
				current: index,
				urls: that.urls,
			});
		},
		getSystemInfo() {
			let that = this;
			uni.getSystemInfo({
				success: function(e) {
					console.log(e);
					that.windowHeight = e.windowHeight;
					that.windowWidth = e.windowWidth;
				}
			});
		}
	}
};
</script>

<style>
.box {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
image {
}
page {
	width: 100%;
	height: 100%;
}
</style>
